<template>
  <div class="dashboard-container">
    <div class="patchcardContent">
      <div class="title">补卡规则</div>
      <div class="cont">
        <div class="tableCont">
          <el-table ref="multipleTable" :data="tableData" style="width: 100%">
            <el-table-column align="center" label="补卡规则名称" width="160" show-overflow-tooltip>
              <template slot-scope="scope">{{ scope.row.makeupName }}</template>
            </el-table-column>
            <el-table-column align="left" label="规则内容" show-overflow-tooltip>
              <template slot-scope="scope">
                <p>{{ scope.row.allowMakeup ? '允许补卡' : '不允许补卡' }}</p>
                <div v-if="scope.row.allowMakeup">
                  <p v-if="scope.row.currentMonthOnly">仅可进行当月补卡</p>
                  <p v-if="scope.row.currentMonthOnly">每月可提交 {{ scope.row.maxMakeupNumber }} 次补卡</p>
                </div>
              </template>
            </el-table-column>
            <el-table-column align="center" label="应用范围" >
              <template slot-scope="scope">
                <span>全公司</span>
<!--                <span v-for="it in scope.row.attendGroups" :key="it.id"> {{ it.name }} </span>-->
              </template>
            </el-table-column>
            <el-table-column width="120" prop="address" center label="操作" show-overflow-tooltip>
              <template slot-scope="scope">
                <span class="actLab" @click="editerHander(scope.row)">编辑</span>
              </template>
            </el-table-column>
          </el-table>
          <div class="pageList">
            <el-pagination
              v-if="total > pageSize"
              layout="prev, pager, next"
              @current-change="handlePageChange"
              :total="total">
            </el-pagination>
          </div>
        </div>
      </div>
      <el-dialog title="修改补卡规则" :visible.sync="dialogVisible" width="40%" center>
        <div class="chgrule">
          <el-checkbox-group v-model="checkList" @change="changeHandle">
            <div><el-checkbox label="allow">允许补卡</el-checkbox></div>
            <div v-if="checkList.indexOf('allow') != -1"><el-checkbox label="currentMonthOnly">仅可进行当月补卡</el-checkbox></div>
            </el-checkbox-group>
            <div v-if="checkList.indexOf('allow') != -1 && checkList.indexOf('currentMonthOnly') != -1">限制补卡次数：每月按照 <input type="text" class="miniInput" v-model="maxMakeupNumber" @input="setNum" size="mini"> 补卡</div>
        </div>
        <div class="submitBox">
          <el-button size="mini" style="color:#3345ff;" @click="dialogVisible = false">取 消</el-button>
          <el-button size="mini" class="submit" type="primary" @click="confirmDel">确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
  import {mapGetters} from 'vuex'

  export default {
        name: 'Dashboard',
        data() {
            return {
                dialogVisible:false,
                loading:false,
                tableData: [],
                total: 0,
                page: 1,
                pageSize: 5,
                value:'',
                options: [],
                adminListData: [],
                checkList:[],
                monthLimit:'',
                makeupName: '',
                maxMakeupNumber: ''
            }
        },
        computed: {
            ...mapGetters([
                'name'
            ]),
        },
        created(){
            this.init()
        },
        methods: {
            init(){
                this.$store.dispatch('attendance/getRuleMakeupListAct', {page:this.page,pageSize:this.pageSize}).then((res) => {
                    this.tableData = res.rows
                    this.total = Number(res.total)
                    this.loading = false
                }).catch(() => {
                    this.loading = false
                })
            },
            changeHandle(){
               console.log(this.checkList)
            },
            addHander(){
                this.value = ''
                this.dialogVisible = true
            },
            editerHander(row){
              console.log(3333,row)
                row.allowMakeup ? this.checkList.push('allow') : ''
                row.allowMakeup ? this.checkList.push('monthLimit') : ''
                row.currentMonthOnly ? this.checkList.push('currentMonthOnly') : ''
                this.maxMakeupNumber = row.maxMakeupNumber
                this.makeupName = row.makeupName
                this.patchId = row.id
                this.dialogVisible = true
            },
            handlePageChange(val) {
                this.page = val
                this.init()
            },
            setNum(obj){
                const val = obj.target.value
                let arr = [...this.checkList]
                let num = arr.indexOf('monthLimit')
                if (val == '') {
                    num != -1 ? arr.splice(num, 1) : null
                } else {
                    num == -1 ? arr.push('monthLimit') : null
                }
                this.checkList = arr
            },
            checkListHander(val){
              if (!val){
                  this.monthLimit = ''
              }
            },
            confirmDel(){
                let param = {id:this.patchId, allowMakeup: false, currentMonthOnly: false, maxMakeupNumber: this.maxMakeupNumber}
                this.checkList.forEach(n => {
                    switch (n) {
                        case 'allow':
                            param.allowMakeup = true
                            break
                        case 'currentMonthOnly':
                            param.currentMonthOnly = true
                            break

                    }
                })
                this.$store.dispatch('attendance/addRuleMakeupAct',{...param}).then((res) => {
                    this.dialogVisible = false
                    this.$message.success('数据提交成功！')
                    this.init()
                    this.loading = false
                }).catch(() => {
                    this.loading = false
                })
            },
        }
    }
</script>
<style lang="scss">
  .patchcardContent {
    .el-table thead th, .el-table thead tr {
      background: #edeffd;
    }

    .pageList {
      text-align: right;
      padding: 10px 0;
      .el-pager li {
        margin: 0 5px;
        min-width: 28px;
        width: 28px;
      }

      .active {
        background: #3345ff;
        border-radius: 100%;
        color: #fff;
      }
    }

    .el-checkbox__input.is-checked .el-checkbox__inner, .el-checkbox__input.is-indeterminate .el-checkbox__inner{
      background: #3345ff;
      border-color: #3345ff;
    }
    .el-checkbox__input.is-checked+.el-checkbox__label{
      color:#606266;
    }
  }
</style>
<style lang="scss" scoped>
  .dashboard {
    &-container {
      .patchcardContent {
        .title {
          text-align: center;
          padding: 0 15px;
          line-height: 40px;
          background: #eceffc;
        }
        .cont {
          padding:10px 20px;
          .tableCont{
            background: #fff;
            p{
              margin: 0px;
            }
          }
          .titlab{
            margin: 0 4px;
            font-size: 12px;
            border-radius: 4px;
            padding: 4px 10px;
          }
          .actLab{
            color:#3345ff;
            margin: 0 4px;
            cursor: pointer;
          }
        }
        .itemsLIst{
          display: flex;
          flex-wrap: wrap;
          line-height: 40px;
          .items{
            width: calc(50% - 5px);
            display: flex;
            justify-content: space-between;
            box-shadow: 2px 2px 10px #e6e6e6;
            margin: 5px 0;
            border-radius: 5px;
            padding: 10px 15px;
            .lab{
              display: inline-block;
              text-align: center;
              width: 40px;
              height: 40px;
              color:#fff;
              border-radius: 100px;
              font-size: 22px;
              margin-right: 10px;
            }
          }
          .items:nth-child(2n-1){
            margin-right: 10px;
          }
        }
        .tit{
          line-height: 50px;
        }
        .submitBox{
          display: flex;
          justify-content: center;
          margin-top: 20px;
          .submit{
            background: #3345ff;
            border-color:#3345ff;
          }
        }
        .miniInput{
          width: 50px;
          line-height: 17px;
          border-radius: 3px;
          border: solid 1px #ccc;
          padding: 3px 4px;
        }
        .dialog-footer{
          display: flex;
          justify-content: center;
          text-align: center;
        }
      }
    }
  }
</style>
